<!--
- File:    收藏夹列表.
-->
<template>
  <div class="Web_Box nb  CollectingGoods" style="padding-top: 0">
    <div class="ShopGoods EditPro hidden bg_fff">
      <div class="ProList">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="false"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false">
          <li v-for="item in collectList.data" @click="gotoGoodsDetail(item.store_id, item.goods_commonid)">
            <div class="Pic"><img :src="$config.imgsite + $config.goodsImgSrc + item.store_id + '/' + item.goods_image + '_w150'" alt=""/></div>
            <div class="Con">
              <div class="pl20">
                <h2 class="slh2">{{item.goods_name}}</h2>
                <p class="State" v-if="item.goods_state != 1"><span>失效</span></p>
                <p class="PriceQuantity" v-if="item.goods_state == 1"><span class="fl cr_f84e37">￥{{item.goods_price}}</span></p>
              </div>
              </div>
            <div class="operation f-cb">
              <a href="javascript:void(0)" @click.stop="delCollect(item.goods_commonid)"><i class="iconfont icon-del3"></i></a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <loading-more :allLoaded="collectList.allLoaded" :show="collectList.data.length > 0"></loading-more>
    <empty-data :show="collectList.allLoaded && collectList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>

  export default{
    data() {
      return {
        collectList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getCollectList(this.collectList.page, this.collectList.pageSize)
    },
    methods: {
      gotoGoodsDetail(storeId, id) {
        this.$router.push({name: 'goods-detail', params: {id: id}, query: {storeId: storeId}})
      },
      getCollectList(page, pageSize) {
        this.collectList.loading = true
        this.$request.getCollectList(page, pageSize).then(data => {
          if (data.length < this.collectList.pageSize) {
            this.collectList.allLoaded = true
          }
          this.collectList.data = [...this.collectList.data, ...data]
        }).finally(() => {
          this.collectList.requested = true
          this.collectList.loading = false
        })
      },
      loadMore() {
        if (this.collectList.loading || this.collectList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getCollectList(++this.collectList.page, this.collectList.pageSize)
        }, 500)
      },
      delCollect(id) {
        this.$messageBox.confirm(`你确定要删除吗?`).then(action => {
          this.$request.delCollect(id).then(data => {
            this.$toast('删除收藏成功')
            for (let i = 0; i < this.collectList.data.length; i++) {
              if (this.collectList.data[i].goods_commonid == id) {
                this.collectList.data.splice(i, 1)
              }
            }
          }).catch(e => {
            this.$toast('删除收藏失败：' + e.msg)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>

</style>